import React from 'react';
import {Form, Row, Col, Input, Button, Popconfirm ,Divider} from 'antd';
import {injectIntl} from 'react-intl';
import {Link} from 'react-router-dom'
import Grid from '../../components/table/grid';
import axios from 'axios'
const FormItem = Form.Item;
const createForm = Form.create;

class newRoleManager extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            params: {
                name: '',
                refresh: 0
            }
        };
        const common = this.props.intl.messages.common;
        this.columns = [
            {
                title: common.roleName,
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: common.createTime,
                dataIndex: 'createTime',
                key: 'createTime',
            },
            {
                title: common.modifyTime,
                dataIndex: 'modifyTime',
                key: 'modifyTime',
            },
            {
                title: common.operation,
                key: 'operation',
                render: (text, record) => (
                    <span>
                        <Link to={{pathname: "/company/addRole", state: {status: "modify", info: record}}}>
                        {common.modify}
                        </Link>
                        <Divider type="vertical"/>
                        <Popconfirm title={`${common.VerifyPerformed}？`} okText={common.sure} onConfirm={() => this.deleteRole(record)}
                                    cancelText={common.cancel}>
                            <a>{common.delete}</a>
                        </Popconfirm>
                    </span>
                ),
            }];

    }

    deleteRole=(text)=>{
        axios.get('api/role/mod',{params:{id:text.id,status:9}}).then(res=>{
            if(res&&res.data){
                this.setState({
                    refresh: this.state.refresh + 1
                })
            }
        })
    }

    //提交表格验证
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((errors, values) => {
            if (!!errors) {
                console.log('Errors in form!!!');
                return;
            }
            console.log('Submit!!!', values);
            this.setState({
                params: {...values},
                refresh: this.state.refresh + 1
            })
        });
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const common = this.props.intl.messages.common;
        return (
            <div>
                <form form={this.props.form} >
                    <Row gutter={12} type="flex">
                        <Col xxl={3} xl={5}>
                            <FormItem
                            >
                                {getFieldDecorator('name')(
                                    <Input/>
                                )}
                            </FormItem>
                        </Col>
                        <Col>
                            <FormItem>
                                <Button className="ant-btn-84" type="primary" style={{marginRight: 8}}
                                        onClick={this.handleSubmit}>{common.search}</Button>
                                <Link to={{pathname: "/company/addRole", state: {status: "add", info: null}}}>
                                    <Button type="primary" className="ant-btn-84">{common.addRole}</Button>
                                </Link>
                            </FormItem>
                        </Col>
                    </Row>
                </form>
                <Grid refresh={this.state.refresh} params={this.state.params} columns={this.columns}
                      url="api/role/list/qry"/>
            </div>
        )
    }
}


newRoleManager = createForm()(newRoleManager);
export default injectIntl(newRoleManager);